<!-- <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <table border="1" cellspacing="0" cellpadding="10">
        <tr>
            <th class="allcheck">
                <input type="checkbox" id="checkall">
                <span class="all">全选</span>
            </th>
            <th>商品</th>
            <th>商家</th>
            <th>价格</th>
        </tr>
        <tr>
            <td><input type="checkbox" name="check" class="ck"></td>
            <td>小米手机</td>
            <td>小米</td>
            <td>$1999</td>
        </tr>
        <tr>
            <td><input type="checkbox" name="check" class="ck"></td>
            <td>小米净水器</td>
            <td>小米</td>
            <td>$4999</td>
        </tr>
        <tr>
            <td><input type="checkbox" name="check" class="ck"></td>
            <td>小米电视</td>
            <td>小米</td>
            <td>$5999</td>
        </tr>
    </table>
    <script>
        const checkall = document.getElementById('checkall');
        const checks = document.querySelectorAll('.ck');

        checkall.addEventListener('change', function () {
            checks.forEach(function (ck) {
                ck.checked = checkall.checked;
            });
        });
        
    </script>
</body>

</html> -->

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        table {
            border-collapse: collapse;
            width: 500px;
            text-align: center;
        }

        table,
        th,
        td {
            border: 1px solid #b7b4b4;
        }

        th {
            background-color: #09c;
            color: white;
        }
    </style>
</head>

<body>
    <table>
        <tr>
            <th><input type="checkbox" class="ckAll">全选</th>
            <th>商品</th>
            <th>商家</th>
            <th>价格</th>
        </tr>
        <tr>
            <td><input type="checkbox" class="ck"></td>
            <td>小米手机</td>
            <td>小米</td>
            <td>￥1999</td>
        </tr>
        <tr>
            <td><input type="checkbox" class="ck"></td>
            <td>小米手机</td>
            <td>小米</td>
            <td>￥1999</td>
        </tr>
        <tr>
            <td><input type="checkbox" class="ck"></td>
            <td>小米手机</td>
            <td>小米</td>
            <td>￥1999</td>
        </tr>
    </table>

    <script>
        const ckall = document.querySelector('.ckAll')
        const ck = document.querySelectorAll('.ck')
        ckall.addEventListener('click', function () {
            for (let i = 0; i < ck.length; i++) {
                ck[i].checked = ckall.checked
            }
        })


        for (let i = 0; i < ck.length; i++) {
            ck[i].addEventListener('click', function () {
                ckall.checked = cked.length === ck.length
            })
        }




    </script>
</body>

</html>